<template>
	<view>
		<view class="top" @tap="toTeachDetails(top.id)">
			<view><image :src='top.cover' class="top-image" mode=""></image></view>
			<view class="top-text" style="font-size: 28rpx;">{{top.title}}</view>
		</view>
		<view class="bg">
			<view class="teach-con" v-for="(item,index) in listData" :key="index" @tap="toTeachDetails(item.id)">
				<image class="teach-left" :src="item.cover"></image>
				<view class="teach-right">
					{{item.title}}
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sys:0,
				type:0,
				top:[],
				listData:[]
			}
		},
		onLoad(options) {
			// console.log(options)
			this.type = options.type
			this.sys = options.sys
			this.getList()
		},
		methods: {
			toTeachDetails(id){
				uni.navigateTo({
					url:`/pages/index/teachdetails?id=${id}`
				})
			},
			getList(){
				uni.showLoading({
					title:'加载中...'
				})
				this.$api.interfaceApi('getNewsList')({
					type:this.type,
					sys:this.sys
				}).then(res=>{
					console.log(res)
					if(res.code==200){
						this.top = res.data.top
						this.listData = res.data.list
					}
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style>
.top{
	width: 100%;
	height: 350rpx;
}
	.top-image{
		width: 100%;
		height: 350rpx;
		z-index: -1;
		position: relative;
		background-size: auto;
	}
	.top-text{
		margin: 10rpx;
		z-index: 1;
		position: absolute;
		left: 2%;
		top: 20%;
		display: inline;
		color: #ffffff;
	}
	
.bg{
	margin: 10rpx;
	padding: 15rpx;
	background-color: #ffffff;
}
	.teach-con{
		display: flex;
		width: 100%;
		height: 150rpx;
		border-bottom:2rpx solid #ccc;
		padding: 20rpx 2rpx;
	}
		.teach-left{
			width: 30%;
			height: 135rpx;
			margin: 10rpx;
			background-size: auto;
			background-repeat: no-repeat;
		}
		.teach-right{
			width: 70%;
			margin: 15rpx 20rpx;
			font-size: 26rpx;
			text-overflow: ellipsis;
			-webkit-line-clamp: 3;
			display: -webkit-box;
			-webkit-box-orient:vertical;
			overflow: hidden;
		}
</style>
